<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        h1, h2 {
            color: #333;
        }
        input, textarea, button {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #007bff;
            color: white;
            cursor: pointer;
            font-weight: bold;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            margin-top: 10px;
            white-space: pre-wrap;
            font-family: monospace;
        }
        .success {
            border-color: #28a745;
            background-color: #d4edda;
        }
        .error {
            border-color: #dc3545;
            background-color: #f8d7da;
        }
        .delete-btn {
            background-color: #dc3545;
        }
        .delete-btn:hover {
            background-color: #c82333;
        }
        .update-btn {
            background-color: #ffc107;
            color: #212529;
        }
        .update-btn:hover {
            background-color: #e0a800;
        }
    </style>
</head>
<body>
    <h1>费曼学习平台API测试</h1>
    
    <div class="container">
        <h2>1. 用户注册</h2>
        <input type="text" id="regUsername" placeholder="用户名">
        <input type="email" id="regEmail" placeholder="邮箱">
        <input type="password" id="regPassword" placeholder="密码">
        <button onclick="registerUser()">注册</button>
        <div id="registerResult" class="result" style="display:none;"></div>
    </div>
    
    <div class="container">
        <h2>2. 用户登录</h2>
        <input type="email" id="loginEmail" placeholder="邮箱">
        <input type="password" id="loginPassword" placeholder="密码">
        <button onclick="loginUser()">登录</button>
        <div id="loginResult" class="result" style="display:none;"></div>
    </div>
    
    <div class="container">
        <h2>3. 创建知识点</h2>
        <input type="text" id="kpTitle" placeholder="知识点标题">
        <textarea id="kpContent" placeholder="知识点内容" rows="4"></textarea>
        <button onclick="createKnowledgePoint()">创建知识点</button>
        <div id="createKpResult" class="result" style="display:none;"></div>
    </div>
    
    <div class="container">
        <h2>4. 获取知识点列表</h2>
        <button onclick="getKnowledgePoints()">获取所有知识点</button>
        <div id="getKpsResult" class="result" style="display:none;"></div>
    </div>
    
    <div class="container">
        <h2>5. 获取单个知识点</h2>
        <input type="text" id="kpId" placeholder="知识点ID">
        <button onclick="getKnowledgePoint()">获取知识点详情</button>
        <div id="getKpResult" class="result" style="display:none;"></div>
    </div>
    
    <div class="container">
        <h2>6. 更新知识点</h2>
        <input type="text" id="updateKpId" placeholder="知识点ID">
        <input type="text" id="updateKpTitle" placeholder="新标题（可选）">
        <textarea id="updateKpContent" placeholder="新内容（可选）" rows="4"></textarea>
        <button class="update-btn" onclick="updateKnowledgePoint()">更新知识点</button>
        <div id="updateKpResult" class="result" style="display:none;"></div>
    </div>
    
    <div class="container">
        <h2>7. 删除知识点</h2>
        <input type="text" id="deleteKpId" placeholder="知识点ID">
        <button class="delete-btn" onclick="deleteKnowledgePoint()">删除知识点</button>
        <div id="deleteKpResult" class="result" style="display:none;"></div>
    </div>
    
    <script>
        // 全局变量存储token
        let authToken = '';
        
        // 显示结果的辅助函数
        function showResult(elementId, data, isSuccess = true) {
            const element = document.getElementById(elementId);
            element.textContent = JSON.stringify(data, null, 2);
            element.className = 'result ' + (isSuccess ? 'success' : 'error');
            element.style.display = 'block';
        }
        
        // 注册用户
        async function registerUser() {
            const username = document.getElementById('regUsername').value;
            const email = document.getElementById('regEmail').value;
            const password = document.getElementById('regPassword').value;
            
            try {
                const response = await fetch('/api/users/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ username, email, password })
                });
                
                const data = await response.json();
                showResult('registerResult', data, response.ok);
                
                if (response.ok) {
                    authToken = data.token;
                }
            } catch (error) {
                showResult('registerResult', { error: error.message }, false);
            }
        }
        
        // 登录用户
        async function loginUser() {
            const email = document.getElementById('loginEmail').value;
            const password = document.getElementById('loginPassword').value;
            
            try {
                const response = await fetch('/api/users/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ email, password })
                });
                
                const data = await response.json();
                showResult('loginResult', data, response.ok);
                
                if (response.ok) {
                    authToken = data.token;
                }
            } catch (error) {
                showResult('loginResult', { error: error.message }, false);
            }
        }
        
        // 创建知识点
        async function createKnowledgePoint() {
            const title = document.getElementById('kpTitle').value;
            const content = document.getElementById('kpContent').value;
            
            if (!authToken) {
                showResult('createKpResult', { error: '请先登录获取认证token' }, false);
                return;
            }
            
            try {
                const response = await fetch('/api/knowledge-points', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'x-auth-token': authToken
                    },
                    body: JSON.stringify({ title, content })
                });
                
                const data = await response.json();
                showResult('createKpResult', data, response.ok);
            } catch (error) {
                showResult('createKpResult', { error: error.message }, false);
            }
        }
        
        // 获取知识点列表
        async function getKnowledgePoints() {
            if (!authToken) {
                showResult('getKpsResult', { error: '请先登录获取认证token' }, false);
                return;
            }
            
            try {
                const response = await fetch('/api/knowledge-points', {
                    method: 'GET',
                    headers: {
                        'x-auth-token': authToken
                    }
                });
                
                const data = await response.json();
                showResult('getKpsResult', data, response.ok);
            } catch (error) {
                showResult('getKpsResult', { error: error.message }, false);
            }
        }
        
        // 获取单个知识点
        async function getKnowledgePoint() {
            const id = document.getElementById('kpId').value;
            
            if (!authToken) {
                showResult('getKpResult', { error: '请先登录获取认证token' }, false);
                return;
            }
            
            if (!id) {
                showResult('getKpResult', { error: '请输入知识点ID' }, false);
                return;
            }
            
            try {
                const response = await fetch(`/api/knowledge-points/${id}`, {
                    method: 'GET',
                    headers: {
                        'x-auth-token': authToken
                    }
                });
                
                const data = await response.json();
                showResult('getKpResult', data, response.ok);
            } catch (error) {
                showResult('getKpResult', { error: error.message }, false);
            }
        }
        
        // 更新知识点
        async function updateKnowledgePoint() {
            const id = document.getElementById('updateKpId').value;
            const title = document.getElementById('updateKpTitle').value;
            const content = document.getElementById('updateKpContent').value;
            
            if (!authToken) {
                showResult('updateKpResult', { error: '请先登录获取认证token' }, false);
                return;
            }
            
            if (!id) {
                showResult('updateKpResult', { error: '请输入知识点ID' }, false);
                return;
            }
            
            // 构建更新数据
            const updateData = {};
            if (title) updateData.title = title;
            if (content) updateData.content = content;
            
            try {
                const response = await fetch(`/api/knowledge-points/${id}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'x-auth-token': authToken
                    },
                    body: JSON.stringify(updateData)
                });
                
                const data = await response.json();
                showResult('updateKpResult', data, response.ok);
            } catch (error) {
                showResult('updateKpResult', { error: error.message }, false);
            }
        }
        
        // 删除知识点
        async function deleteKnowledgePoint() {
            const id = document.getElementById('deleteKpId').value;
            
            if (!authToken) {
                showResult('deleteKpResult', { error: '请先登录获取认证token' }, false);
                return;
            }
            
            if (!id) {
                showResult('deleteKpResult', { error: '请输入知识点ID' }, false);
                return;
            }
            
            try {
                const response = await fetch(`/api/knowledge-points/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'x-auth-token': authToken
                    }
                });
                
                const data = await response.json();
                showResult('deleteKpResult', data, response.ok);
            } catch (error) {
                showResult('deleteKpResult', { error: error.message }, false);
            }
        }
    </script>
</body>
</html>